<template>
  <TabContainer  :btn1-callback="save" :btn2-callback="cancel">

  <table style="width: 100%">
    <thead>
      <tr class="row">
        <th class="col-6">Task</th>
        <th class="col-6">Complete</th>
      </tr>
    </thead>
    <hr />
    <tbody>
        {{ 'CTC010' }}
        <tr
          v-for="(item, index) in filterRows"
          :key="index"
          class="cursor-pointer row"
          :class="getStatusColor(item.status)"
          style="text-align: center"
        >
          <td class="col-6">{{ item.stock_code }}</td>
          <td class="col-6">
            <q-checkbox dense v-model="isComplete" label="" color="primary" />
          </td>
        </tr>
        <div style="font-size: 1rem; font-weight: 700">
          {{ 'CTC010A' }}
        </div>

        <tr
          v-for="(item, index) in filterRows"
          :key="index"
          class="cursor-pointer row"
          :class="getStatusColor(item.status)"
          style="text-align: center"
        >
          <td class="col-6">{{ item.stock_code }}</td>
          <td class="col-6">
            <q-checkbox dense v-model="isComplete" label="" color="primary" />
          </td>
        </tr>
    </tbody>
  </table>
</TabContainer>

</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { getStatusColor } from 'src/utils/getPublic';
import TabContainer from '../container/TabContainer.vue';

const isComplete = ref(true);

const data = [
  {
    id: 1,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'danger',
  },
  {
    id: 2,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  { id: 3, stock_code: '681700085', serial_number: 'SN12345', status: 'dos' },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
];

const rows = ref(data);
const filterRows = computed(() => {
  return rows.value;
});

function save(){
  console.log('save');
  
}

function cancel(){
  console.log('cancel');
}
</script>
<style scoped>
table {
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  padding: 0.5rem;
}

table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: white;
}
</style>
